<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>淘宝页面</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .head {
        background-color: #f5f5f5;
      }
      .head li {
          float: left;
      }
      .top {
        width: 1350px;
        height: 37px;
        margin: auto;
        line-height: 35px;
        font-size: 10px;
        background-color: #f5f5f5;
      }
      li {
        list-style: none;
      }
      .color {
        color: rgb(254, 172, 48);
      }
      .a ul li {
        margin: 0px 20px 0px 0px;
        background-color: #f5f5f5;
      }
      .b {
        margin-left: 800px;
      }
      .b ul li {
        margin: 0px 20px 0px 0px;
        background-color: #f5f5f5;
      }
      .aaa {
        margin-top: 50px;
      }
      .dd {
        float: left;
        margin: 25px 150px 0 0;
      }
      .log img {
        width: 150px;
        float: left;
        margin-right: 180px;
      }
      .main {
        width: 1190px;
        height: 1000px;
        background-color: #fff;
        margin: auto;
        border-top-left-radius: 18px;
        border-top-right-radius: 18px;
        padding-top: 5px;
      }

      .top-bar {
        width: 1190px;
        height: 36px;
        padding-bottom: 10px;
      }

      .top-bar li {
        height: 36px;
        line-height: 36px;
        float: left;
        list-style-type: none;
      }

      .themed-market {
        float: left;
        width: 190px;
        height: 36px;
        line-height: 36px;
        text-align: center;
        font-size: 16px;
        color: #ff6200;
      }

      .right-list .one li {
        margin: 0 3px;
        padding: 0 4px;
      }

      .right-list .two li {
        margin-left: 7px;
        padding: 0 5px;
      }

      .right-list .three li {
        margin-left: 7px;
        padding: 0 5px;
      }

      .main-core .left-list li {
        padding-left: 25px;
        padding-right: 19px;
        width: 145px;
        height: 34px;
        list-style-type: none;
        line-height: 34px;
        position: relative;
        cursor: pointer;
      }

      .main-core .left-list li .text {
        font-size: 14px;
        font-weight: 400;
        color: #666;
      }

      .right-icon {
        position: absolute;
        right: 5px;
      }

      .left-list {
        float: left;
      }

      .images-list {
        width: 520ox;
        height: 280px;
        float: left;
      }

      .lunbo {
        float: left;
        line-height: 280px;
        position: relative;
        border-radius: 20px;
        width: 520px;
        height: 280px;
        background-image: url("banner.png");
      }

      .lunbo .left {
        visibility: hidden;
        position: absolute;
        left: 0;
        width: 32px;
        height: 32px;
        color: #fff;
        font-size: 32px;
        display: block;
        cursor: pointer;
      }

      .lunbo .right {
        visibility: hidden;
        position: absolute;
        right: 0;
        width: 32px;
        height: 32px;
        color: #fff;
        font-size: 32px;
        display: block;
        cursor: pointer;
      }

      .six-one-eight {
        float: left;
        margin-left: 10px;
        width: 160px;
        height: 280px;
        border-radius: 20px;
        background-image: url("/images/618.png");
      }

      .user-info {
        float: left;
        margin-left: 10px;
        width: 290px;
        height: 280px;
      }

      .user-info .head {
        padding-top: 10px;
        width: 290px;
        height: 100px;
        background-image: url("banner.png");
        background-size: 100%;
      }

      .avatar {
        width: 50px;
        height: 50px;
        margin: auto;
        background-image: url("log.png");
        border-radius: 100%;
      }

      .btn-list {
        padding-top: 10px;
        padding-bottom: 10px;
        width: 290px;
        height: 25px;
      }
      .btn {
        cursor: pointer;
        margin-left: 2px;
        margin-right: 2px;
        width: 92px;
        height: 25px;
        line-height: 25px;
        background-image: linear-gradient(to right, #ff5000 0, #ff6f06 100%);
        float: left;
        border: none;
        color: #fff;
        background-repeat: repeat-x;
        text-align: center;
        border-radius: 4px;
        font-size: 14px;
        font-weight: 400;
        background-clip: padding-box;
      }

      .user-info-img {
        cursor: pointer;
        width: 290px;
        height: 65px;
        background-size: 100%;
        background-image: url("banner.png");
      }

      .notice {
        padding-top: 6px;
        width: 290px;
        height: 20px;
      }

      .notice li {
        list-style-type: none;
        float: left;
        height: 20px;
        line-height: 20px;
        width: 32px;
        text-align: center;
        margin: 0 11px;
        color: #3c3c3c;
        cursor: pointer;
        font-size: 14px;
      }

      .modu {
        width: 290px;
        height: 25px;
        padding-top: 8px;
        padding-bottom: 6px;
      }

      .modu li {
        font-size: 14px;
        list-style-type: none;
        float: left;
        width: 130px;
        height: 25px;
        line-height: 25px;
        color: #ff5000 !important;
      }

      .wzdh {
        color: #ff4200;
        font-size: 36px;
        font-weight: 500;
        text-align: center;
        line-height: 250px;
        display: none;
        z-index: 10001;
        position: absolute;
        top: 35px;
        width: 1190px;
        height: 250px;
        background-color: #fff;
      }

      li {
        cursor: pointer;
      }
      
      
    </style>
  </head>
  <body>
    <div class="nav">
      <div class="head">
        <div class="top">
          <div class="a">
            <ul>
              <li>中国大陆</li>
              <li class="color">亲，请登入</li>
              <li>免费注册</li>
              <li>手机逛淘宝</li>
            </ul>
          </div>
          <div class="b">
            <ul>
              <li>我的淘宝</li>
              <li>购物车</li>
              <li>收藏夹</li>
              <li>商品分类</li>
              <li>免费开店</li>
              <li>千牛卖家中心</li>
              <li>联系客服</li>
              <li>网站导航</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="aaa">
        <div class="log">
          <img src="log.png" alt="" />
        </div>
        <div class="dd">
          <label for="" class="hh">宝贝</label>
          <input type="text" placeholder="饮料整箱 果汁饮料" />
          <div class="ss"><button class="btn">搜索</button></div>
        </div>
        <div >
            <button id="btn">*</button>
          <img src="ma.png" alt="" width="100" height="120" class="ma" id="ma"/>
        </div>
      </div>
    </div>
   
    <div class="main">
       
        <!-- Main Top Bar -->
        <div class="top-bar">
          <div class="themed-market">主题市场</div>
          <div class="right-list">
            <ul class="one">
              <li style="color: #ff0036">天猫</li>
              <li style="color: #ff0036">聚划算</li>
              <li style="color: #33c900">天猫超市</li>
            </ul>
            <span
              style="
                float: left;
                height: 36px;
                line-height: 36px;
                margin-left: 7px;
              "
              >|</span
            >
            <ul class="two">
              <li>司法拍卖</li>
              <li>飞猪旅行</li>
              <li>天天特卖</li>
              <li>淘小铺</li>
            </ul>
            <span
              style="
                float: left;
                height: 36px;
                line-height: 36px;
                margin-left: 7px;
              "
              >|</span
            >
            <ul class="three">
              <li>造点货</li>
              <li>苏宁易购</li>
              <li>淘宝心选</li>
              <li>智能生活</li>
            </ul>
          </div>
        </div>
        <!-- Main Core -->
        <div class="main-core">
          <div class="left-list">
            <ul>
              <li>
                <span class="text">女装 / 内衣 / 家居</span
                ><span
                  class="right-icon code iconfont icon-aui-icon-right"
                ></span>
              </li>
              <li>
                <span class="text">女装 / 内衣 / 家居</span
                ><span
                  class="right-icon code iconfont icon-aui-icon-right"
                ></span>
              </li>
              <li>
                <span class="text">女装 / 内衣 / 家居</span
                ><span
                  class="right-icon code iconfont icon-aui-icon-right"
                ></span>
              </li>
              <li>
                <span class="text">女装 / 内衣 / 家居</span
                ><span
                  class="right-icon code iconfont icon-aui-icon-right"
                ></span>
              </li>
              <li>
                <span class="text">女装 / 内衣 / 家居</span
                ><span
                  class="right-icon code iconfont icon-aui-icon-right"
                ></span>
              </li>
              <li>
                <span class="text">女装 / 内衣 / 家居</span
                ><span
                  class="right-icon code iconfont icon-aui-icon-right"
                ></span>
              </li>
              <li>
                <span class="text">女装 / 内衣 / 家居</span
                ><span
                  class="right-icon code iconfont icon-aui-icon-right"
                ></span>
              </li>
              <li>
                <span class="text">女装 / 内衣 / 家居</span
                ><span
                  class="right-icon code iconfont icon-aui-icon-right"
                ></span>
              </li>
              <li>
                <span class="text">女装 / 内衣 / 家居</span
                ><span
                  class="right-icon code iconfont icon-aui-icon-right"
                ></span>
              </li>
              <li>
                <span class="text">女装 / 内衣 / 家居</span
                ><span
                  class="right-icon code iconfont icon-aui-icon-right"
                ></span>
              </li>
              <li>
                <span class="text">女装 / 内衣 / 家居</span
                ><span
                  class="right-icon code iconfont icon-aui-icon-right"
                ></span>
              </li>
              <li>
                <span class="text">女装 / 内衣 / 家居</span
                ><span
                  class="right-icon code iconfont icon-aui-icon-right"
                ></span>
              </li>
              <li>
                <span class="text">女装 / 内衣 / 家居</span
                ><span
                  class="right-icon code iconfont icon-aui-icon-right"
                ></span>
              </li>
              <li>
                <span class="text">女装 / 内衣 / 家居</span
                ><span
                  class="right-icon code iconfont icon-aui-icon-right"
                ></span>
              </li>
            </ul>
          </div>
          <div class="images-list">
            <div class="lunbo">
              <span class="left iconfont icon-fanhui"></span>
              <span class="right iconfont icon-gengduo"></span>
            </div>
            <div class="six-one-eight"></div>
          </div>
          <div class="user-info">
            <div class="head">
              <div class="avatar"></div>
            </div>
            <div class="btn-list">
              <button class="btn">登录</button>
              <button class="btn">注册</button>
              <button class="btn">开店</button>
            </div>
            <div class="user-info-img"></div>
            <ul class="notice">
              <li>公告</li>
              <li>规则</li>
              <li>安全</li>
              <li>公益</li>
              <li>千牛</li>
            </ul>
            <ul class="modu">
              <li>魔豆妈妈公益项目</li>
              <li>让母爱永不打烊！</li>
            </ul>
          </div>
          <img width="700px" src="banner.png" alt="" srcset="" class="banner" height="250">
        </div>
  </body>
  <script>
      var btn = document.getElementById("btn");
    var ma = document.getElementById("ma");
    btn.onclick= function (){
        ma.style.display = "none";
    }
  </script>
</html>
